<template>
    <div class="btm-nav shadow-primary">
        <router-link to="/home"
                     @click="[tabAnimate,tabsIndex=0]"
                     :class="[{'active':tabsIndex==0} , 'focus:outline-0 ']">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                 stroke="currentColor"
                 :class="[{'fill-primary':tabsIndex==0} ,'w-6 h-6']">
                <path stroke-linecap="round" stroke-linejoin="round"
                      d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"/>
            </svg>
        </router-link>
        <router-link to="/add"
                     @click="[tabAnimate,tabsIndex=1]"
                     :class="[{'active':tabsIndex==1} ,'focus:outline-0']">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
               :class="[{'fill-primary':tabsIndex==1} ,'w-6 h-6']">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v6m3-3H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
        </router-link>
        <router-link to="/user"
                     @click="[tabAnimate,tabsIndex=2]"
                     :class="[{'active':tabsIndex==2} ,'focus:outline-0']">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                 stroke="currentColor"
                 :class="[{'fill-primary':tabsIndex==2} ,'w-6 h-6']">
                <path stroke-linecap="round" stroke-linejoin="round"
                      d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"/>
            </svg>
        </router-link>
    </div>
</template>
<script setup lang="ts">
import {ref} from "vue";
import {animate} from "motion";

let tabsIndex = ref();


function tabAnimate() {
  let svg = $('svg').get();

  animate(svg,{
    y: "10px",
  },{
    duration:1
  })



}

</script>

<style scoped>

</style>
